<!--
*@Author: QWP
*@Description: 群聊图片查看
*@Date: 2024-07-11 13:35:40
-->
<template>
  <u-collapsed-sider width="320px">
    <a-layout class="f-h-100">
      <a-layout-header class="f-h-auto" style="padding: 14px; background-color: #fff; line-height: 28px;">
        <span style="font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #333333;">群聊图片
        </span>
      </a-layout-header>
      <a-layout-content class="s-bg-white f-padding-rl14"
        style="overflow: auto;">
        <template v-for="(listI, index) in imgList">
          <a-row justify="space-between">
            <a-space size="middle">
              <a-image :src="userHead" style="width: 32px; height: 32px; border-radius: 4px"></a-image>
              <span style="font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;">{{ listI.groupName }}</span>
            </a-space>
            <a-space>
              <span style="font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #666666;" >{{ listI.date }}</span>
            </a-space>
          </a-row>
          <a-list :data-source="listI.images">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-image :src="item" :preview="false"></a-image>
              </a-list-item>
            </template>
          </a-list>
          <a-divider v-if="index != imgList.length - 1" 
            style="height: 2px; background-color: #1890FF" />
        </template>
      </a-layout-content>
    </a-layout>
  </u-collapsed-sider>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'

const userHead = urlFile('login/login.png')

const imgList: Array<any> = reactive([
  { groupName: '自然灾害救援群聊', date: '06.01  12:56', 
    images: [
      urlFile('login/login.png'),
      urlFile('login/login.png'),
      urlFile('login/login.png'),
      urlFile('login/login.png'),
    ]
  },
  { groupName: '应急保障群', date: '06.03  12:56', 
    images: [
      urlFile('login/login.png'),
      urlFile('login/login.png'),
      urlFile('login/login.png'),
      urlFile('login/login.png'),
    ]
  }
])

</script>

<style lang='scss' scoped>
</style>